<template>
    <div class="baseInfo">
        <el-descriptions  v-if="!showEdit">
            <el-descriptions-item label="爱好">
                {{ tableData.hobby }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
                {{ tableData.age }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                {{ tableData.gender }}
            </el-descriptions-item>
            <el-descriptions-item label="生日">
                {{ tableData.birthday }}
            </el-descriptions-item>
            <el-descriptions-item label="车凌">
                {{ tableData.carLing }}
            </el-descriptions-item>
            <el-descriptions-item label="车凌U盘类型">
                {{ tableData.carLingUType }}
            </el-descriptions-item>
            <el-descriptions-item label="入会时间">
                {{ tableData.joinTime }}
            </el-descriptions-item>
        </el-descriptions>

        <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-else>
          <el-row>
            <el-col :span="8">
              <el-form-item label="爱好" prop="hobby">
                <el-input v-model="form.hobby" placeholder="请输入爱好" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄" prop="age">
                <el-input v-model.trim="form.age" placeholder="请输入年龄" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender">
                <el-input v-model.trim="form.gender" placeholder="请输入性别" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="生日" prop="birthday">
                <!-- <el-input v-model="form.birthday" placeholder="请输入生日" /> -->
                <el-date-picker
                    v-model="form.birthday"
                    type="date"
                    placeholder="请选择生日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车凌" prop="carLing">
                <el-input v-model="form.carLing" placeholder="请输入车凌" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车凌U盘类型" prop="carLingUType">
                <el-input v-model="form.carLingUType" placeholder="请输入车凌U盘类型" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
                <el-form-item label="入会时间" prop="joinTime">
                    <!-- <el-input v-model="form.joinTime" type="textarea" placeholder="请输入入会时间" /> -->
                    <el-date-picker
                        v-model="form.joinTime"
                        type="date"
                        placeholder="请选择入会时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    />
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer" v-if="showEdit">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
        <el-button type="primary" @click="handleEdit" style="float: right;" v-else>编 辑</el-button>
    </div>
  </template>
  
  <script>

    import { 
        getMemberAttributeList,
        editMemberAttribute,
        addMemberAttribute
    } from "@/api/mes/sales/memberBasic";
  import ItemSelect  from "@/components/itemSelect/single.vue";
  export default {
    name: 'address',
    props: {
      cellId: undefined,
    },
    components: {
      ItemSelect,
    },
    data() {
      return {
        showItemSelect: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        form: {},
        tableData: {},
        columnConfig: {
          drag: true,
          resizable: true,
          storage: true,
          sortConfig: {
            trigger: 'cell',
            remote: true
          },
          align: 'center',
          headerAlign: 'center'
        },
        rowConfig: {
          drag: true,
          keyField: 'id',
          isHover: true,
        },
        title: '',
        open: false,
        rules: {
            consignee: [
                { required: true, message: '请输入收货人', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入手机', trigger: 'blur' }
            ],
            addrBrief: [
                { required: true, message: '请输入省市区', trigger: 'blur' }
            ],
            address: [
                { required: true, message: '请输入详细地址', trigger: 'blur' }
            ],
        },
        ids: [],
        showEdit: false,
      }
    },
    created() {
        
      // console.log('poStatus', this.poStatus);
    },
    watch: {
      cellId: {
        handler(val) {
          this.getList();
        },
      }
    },
    methods: {
      getList() {
        getMemberAttributeList(this.cellId).then(response => {
          this.tableData = response.data[0] || {};
        });
      },
      reset(){
        this.form = {};
      },
      handleEdit(){
        this.form = {...this.tableData};
        this.showEdit = true;
      },
      cancel(){
            this.open = false;
            this.showEdit = false;
            this.reset();
      },
      submitForm(){
        this.$refs['form'].validate((valid) => {
            if (valid) {
                const params = {
                    ...this.form,
                    clientId: this.cellId,
                }
                if(this.form.id){
                    editMemberAttribute(params).then(response => {
                        this.$message.success('修改成功')
                        this.getList()
                        this.cancel()
                    })
                }else{
                    addMemberAttribute(params).then(response => {
                        this.$message.success('新增成功')
                        this.getList()
                        this.cancel()
                    })
                }
            }
        })
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .baseInfo{
      &-header{
        margin-bottom: 10px;
      }
    }
  </style>